<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <title>上传附件</title>
    <style>
    .form-group>label{
        line-height: 34px;
    }
    </style>
</head>
<body>
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>上传附件</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                上传附件
            </h2>
        </div>
    </div>
</div>
<div class="content">

    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel hblue">
                <div class="panel-heading" style="padding-bottom: 0;">
                    <div class="panel-tools">
                        %{--<a class="showhide"><i class="fa fa-chevron-up"></i></a>--}%
                        %{--<a class="closebox"><i class="fa fa-times"></i></a>--}%
                    </div>
                    <a class="btn btn-primary" href="#step1" data-toggle="tab">上传文件</a>
                    <a class="btn btn-default" href="#step2" data-toggle="tab">上传图片</a>
                    <a class="btn btn-default" href="#step3" data-toggle="tab">上传视频</a>
                </div>
                <div class="panel-body hblue">


                    <div class="text-center m-b-md" id="wizardControl">

                    </div>

                    <div class="tab-content">
                        <div id="step1" class="p-m tab-pane active">

                            <div class="form-group" style="margin-bottom: 60px;">
                                <label class="col-md-2 control-label" style="line-height: 29px;">附件类型</label>

                                <div class="col-md-10">
                                    <select class="col-md-3" name="" id="" style="padding-left: 0;">
                                        <option value="">短信记录</option>
                                    </select>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">上传图片</label>

                                <div class="col-md-10">
                                    <div class="row fileupload-buttonbar">
                                        <div class="col-lg-8">
                                            <span class="btn btn-info fileinput-button">
                                                <i class="glyphicon glyphicon-plus"></i>
                                                <span>选择文件</span>
                                                %{--<input type="file" name="file" id="file1" multiple>--}%
                                            </span>
                                            <button type="submit" class="btn btn-primary start">
                                                <i class="glyphicon glyphicon-upload"></i>
                                                <span>开始上传</span>
                                            </button>
                                            <button type="reset" class="btn btn-warning cancel">
                                                <i class="glyphicon glyphicon-ban-circle"></i>
                                                <span>取消上传</span>
                                            </button>

                                            <span class="fileupload-process"></span>
                                        </div>
                                        <div class="col-lg-4 fileupload-progress fade">
                                            <div class="progress full progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                                <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                                            </div>
                                            <div class="progress-extended">&nbsp;</div>
                                        </div>
                                    </div>
                                    <p class="text-danger">
                                        只能上传图片，支持jpg、png、jpeg等格式，最多可以上传20张图片
                                    </p>
                                    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
                                </div>
                            </div>

                            %{--<div class="form-group">--}%
                            %{--<div class="col-md-5 col-md-offset-2">--}%
                            %{--<g:submitButton class="btn btn-info btn-block submit" name="update" id="submitButton" value="发布"/>--}%
                            %{--<button class="btn btn-info hide" type="button" data-toggle="modal" data-target="#submitCollateral" id="click1">发布</button>--}%
                            %{--</div>--}%
                            %{--</div>--}%

                        </div>

                        <div id="step2" class="p-m tab-pane">
                            <div class="row">
                                123222
                            </div>
                        </div>

                        <div id="step3" class="p-m tab-pane">
                            <div class="row">
                                123333
                            </div>
                        </div>
                    </div>

                    <div class="m-t-md">
                        %{--<p>--}%
                        %{--This is an example of a wizard form which can be easy adjusted. Since each step is a tab, and each clik to next tab is a function you can easily add validation or any other functionality.--}%
                        %{--</p>--}%
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<script>
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $('a[data-toggle="tab"]').removeClass('btn-primary');
        $('a[data-toggle="tab"]').addClass('btn-default');
        $(this).removeClass('btn-default');
        $(this).addClass('btn-primary');
    })
</script>
</body>
</html>
